@page
@{ Layout = "_Layout"; }

<div v-if="forbidden">
  <el-alert
    title="错误提示"
    type="error"
    description="系统已安装，安装向导被禁用！"
    :closable="false"
    show-icon>
  </el-alert>
</div>

<el-card v-else class="box-card">
  <div slot="header" class="clearfix">
    <span>SS CMS 安装向导</span>
  </div>

  <el-steps :active="pageIndex" class="mb-3" finish-status="success">
    <el-step title="许可协议"></el-step>
    <el-step title="环境检测"></el-step>
    <el-step title="数据库设置"></el-step>
    <el-step title="缓存设置"></el-step>
    <el-step title="管理员设置"></el-step>
    <el-step title="安装完成"></el-step>
  </el-steps>
  <div style="height: 20px"></div>

  <div v-if="errorMessage" style="margin-bottom: 10px">
    <el-alert  :title="errorMessage" show-icon :closable="false" type="error"></el-alert>
  </div>

  <template v-if="pageIndex === 0">
    
    <div style="padding: 10px 0">
      SS CMS 开源协议（GPL-3.0）
      <el-link :underline="false" type="primary" :href="utils.getAssetsUrl('pages/eula.html')" target="_blank"> 可打印版本</el-link>
    </div>

    <iframe style="border-color:#F5F5F5; border-width:1px;" scrolling="yes" src="/sitefiles/assets/pages/eula.html" height="320" width="100%"></iframe>
    
    <el-row>
      <el-divider></el-divider>
      <div style="height: 10px"></div>
      <el-col :span="24" align="center">
        <el-checkbox v-model="agreement">我已经阅读并同意此协议</el-checkbox>
        <el-button size="medium" :disabled="!agreement" v-on:click="btnNextClick" type="primary">下一步</el-button>
      </el-col>
    </el-row>
  </template>

  <template v-if="pageIndex === 1">
    
    <el-alert show-icon :closable="false" type="error" v-if="!rootWritable || !siteFilesWritable">
      系统检测到文件夹权限不足，您需要赋予根目录 NETWORK SERVICE 以及 IIS_IUSRS 读写权限
    </el-alert>
    <el-alert show-icon :closable="false" type="success" v-else>
      系统环境及目录权限检测成功，点击下一步进入数据库设置界面！
    </el-alert>
    <div style="height: 10px"></div>
    
    <el-table
      class="headerless"
      :data="[
        {key: '服务器域名', value: location.host},
        {key: 'SSCMS 版本', value: 'SSCMS ' + version},
        {key: '.NET Core 版本', value: frameworkDescription},
        {key: 'OS 版本', value: osDescription},
        {key: '运行环境', value: containerized ? '容器' : '主机'},
        {key: '系统根目录', value: contentRootPath},
        {key: '网站根目录', value: webRootPath}
      ]"
      style="width: 100%">
      <el-table-column
        width="280">
        <template slot-scope="scope">
          <strong>{{scope.row.key}}</strong>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          {{scope.row.value}}
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-divider></el-divider>
      <div style="height: 10px"></div>
      <el-col :span="24" align="center">
        <el-button v-on:click="btnPreviousClick" size="medium">上一步</el-button>
        <el-button :disabled="!rootWritable || !siteFilesWritable" v-on:click="btnNextClick" type="primary" size="medium">下一步</el-button>
      </el-col>
    </el-row>

  </template>

  <template v-if="pageIndex === 2">

    <el-form v-if="containerized" size="medium" label-width="150px">
      <el-form-item label="数据库类型">
        {{ databaseType }}
      </el-form-item>
      <el-form-item label="连接字符串">
        {{ databaseConnectionString }}
      </el-form-item>
    </el-form>

    <el-form v-else ref="databaseForm" size="medium" :model="databaseForm" label-width="150px">
      <el-form-item label="数据库类型" prop="databaseType" :rules="{ required: true, message: '请选择数据库类型' }">
        <el-radio-group v-model="databaseForm.databaseType">
          <el-radio-button v-for="databaseType in databaseTypes" :label="databaseType.value">{{ databaseType.label }}</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <template v-if="databaseForm.databaseType && databaseForm.databaseType !== $sqlite">

        <template v-if="!databaseNames">
          <el-form-item label="数据库主机" prop="databaseHost" :rules="{ required: true, message: '请输入数据库主机' }">
            <el-input v-model="databaseForm.databaseHost" placeholder="请填写数据库的IP地址或域名地址"></el-input>
          </el-form-item>
          <el-form-item label="数据库端口">
            <el-radio v-model="databaseForm.isDatabaseDefaultPort" :label="true">默认端口</el-radio>
            <el-radio v-model="databaseForm.isDatabaseDefaultPort" :label="false">自定义端口</el-radio>
          </el-form-item>
          <el-form-item v-if="!databaseForm.isDatabaseDefaultPort" label="自定义端口" prop="databasePort" :rules="[
            { required: true, message: '请输入自定义端口' }
          ]">
            <el-input v-model="databaseForm.databasePort" type="number" placeholder="连接数据库的端口"></el-input>
          </el-form-item>
          <el-form-item label="数据库用户名" prop="databaseUserName" :rules="{ required: true, message: '请输入数据库用户名' }">
            <el-input v-model="databaseForm.databaseUserName" placeholder="连接数据库的用户名"></el-input>
          </el-form-item>
          <el-form-item label="数据库密码" prop="databasePassword" :rules="{ required: true, message: '请输入数据库密码' }">
            <el-input v-model="databaseForm.databasePassword" type="password" placeholder="连接数据库的密码"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="选择数据库实例" prop="databaseName" :rules="{ required: true, message: '请选择需要安装的数据库实例' }">
            <el-select v-model="databaseForm.databaseName" placeholder="请选择需要安装的数据库实例">
              <el-option v-for="databaseName in databaseNames" :label="databaseName" :value="databaseName"></el-option>
            </el-select>
          </el-form-item>
        </template>

      </template>
      
    </el-form>

    <el-row>
      <el-divider></el-divider>
      <div style="height: 10px"></div>
      <el-col :span="24" align="center">
        <el-button v-on:click="btnPreviousClick" size="medium">上一步</el-button>
        <el-button v-on:click="btnDatabaseConnectClick" type="primary" size="medium">下一步</el-button>
      </el-col>
    </el-row>

  </template>

  <template v-if="pageIndex === 3">

    <el-form v-if="containerized" size="medium" label-width="150px">
      <el-form-item label="缓存类型">
        {{ redisConnectionString ? 'Redis缓存' : '默认缓存' }}
      </el-form-item>
      <el-form-item v-if="redisConnectionString" label="连接字符串">
        {{ redisConnectionString }}
      </el-form-item>
    </el-form>

    <el-form v-else ref="redisForm" size="medium" :model="redisForm" label-width="150px">
      <el-form-item label="缓存类型" prop="isRedis" :rules="{ required: true, message: '请选择缓存类型' }">
        <el-radio-group v-model="redisForm.isRedis">
          <el-radio-button :label="false">默认缓存</el-radio-button>
          <el-radio-button :label="true">Redis缓存</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <template v-if="redisForm.isRedis">

        <el-form-item label="Redis主机" prop="redisHost" :rules="{ required: true, message: '请输入Redis主机' }">
          <el-input v-model="redisForm.redisHost" placeholder="请填写Redis的IP地址或域名地址"></el-input>
        </el-form-item>
        <el-form-item label="Redis端口">
          <el-radio v-model="redisForm.isRedisDefaultPort" :label="true">默认端口</el-radio>
          <el-radio v-model="redisForm.isRedisDefaultPort" :label="false">自定义端口</el-radio>
        </el-form-item>
        <el-form-item v-if="!redisForm.isRedisDefaultPort" label="自定义端口" prop="redisPort" :rules="[
          { required: true, message: '请输入自定义端口' }
        ]">
          <el-input v-model="redisForm.redisPort" type="number" placeholder="连接Redis的端口"></el-input>
        </el-form-item>
        <el-form-item label="安全链接">
          <el-checkbox v-model="redisForm.isSsl" label="SSL安全连接"></el-checkbox>
        </el-form-item>
        <el-form-item label="Redis密码">
          <el-input v-model="redisForm.redisPassword" type="password" placeholder="连接Redis的密码"></el-input>
          <small class="tips">连接Redis的密码，可以为空</small>
        </el-form-item>

      </template>
      
    </el-form>

    <el-row>
      <el-divider></el-divider>
      <div style="height: 10px"></div>
      <el-col :span="24" align="center">
        <el-button v-on:click="btnPreviousClick" size="medium">上一步</el-button>
        <el-button v-on:click="btnRedisConnectClick" type="primary" size="medium">下一步</el-button>
      </el-col>
    </el-row>

  </template>

  <template v-if="pageIndex === 4">

    <el-form ref="adminForm" size="medium" :model="adminForm" label-width="150px">
      <el-form-item label="超级管理员账号" prop="userName" :rules="[{ required: true, message: '请输入超级管理员账号' }]">
        <el-input v-model="adminForm.userName" placeholder="请填写超级管理员账号"></el-input>
        <small class="tips">账号用于登录后台系统</small>
      </el-form-item>
      <el-form-item label="超级管理员密码" prop="adminPassword" :rules="[{ required: true, message: '请输入超级管理员密码' }]">
        <el-input v-model="adminForm.adminPassword" v-on:input="checkPasswordLevel" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码强度">
        <div style="margin-top: 10px">
          <el-rate
            v-model="passwordLevel"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </div>
      </el-form-item>
      <el-form-item label="确认超级管理员密码" prop="confirmPassword" :rules="[{ required: true, message: '请输入确认超级管理员密码' }, { validator: validatePass }]">
        <el-input v-model="adminForm.confirmPassword" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="超级管理员邮箱" prop="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址' }]">
        <el-input v-model="adminForm.email" placeholder="请填写超级管理员邮箱"></el-input>
        <small class="tips">可用于登录、找回密码等功能</small>
      </el-form-item>
      <el-form-item label="超级管理员手机号码" prop="mobile" :rules="[{ validator: utils.validateMobile, message: '字段必须是有效的手机号码' }]">
        <el-input v-model="adminForm.mobile" placeholder="请填写超级管理员手机号码"></el-input>
        <small class="tips">可用于登录、找回密码等功能</small>
      </el-form-item>
      <el-form-item v-if="!containerized" label="是否加密配置文件">
        <el-checkbox v-model="adminForm.isProtectData" label="加密配置文件"></el-checkbox>
        <small class="tips">设置是否加密 sscms.json 配置文件，加密后将隐藏数据库以及Redis链接信息</small>
      </el-form-item>
    </el-form>

    <el-row>
      <el-divider></el-divider>
      <div style="height: 10px"></div>
      <el-col :span="24" align="center">
        <el-button v-on:click="btnPreviousClick" size="medium">上一步</el-button>
        <el-button v-on:click="btnInstallClick" type="primary" size="medium">下一步</el-button>
      </el-col>
    </el-row>

  </template>

  <template v-if="pageIndex === 5">

    <div role="alert" class="el-alert el-alert--success is-light" style="padding: 30px">
      <div class="el-alert__content">
        <span class="el-alert__title is-bold" style="font-size: 14px;">安装完成！</span>
        <p class="el-alert__description" style="font-size: 14px;">恭喜，您已经完成了 SS CMS 的安装</p>
        <p>
          <el-button type="primary" v-on:click="btnEnterClick" size="medium">进入管理后台</el-button>
        </p>
        <el-divider></el-divider>
        <p class="el-alert__description" style="font-size: 14px;">
          获取更多使用帮助请访问
          <el-link :underline="false" type="primary" style="font-size: 14px;" :href="getDocsUrl()" target="_blank">SS CMS 文档中心</el-link>
        </p>
      </div>
    </div>

    <div>
      
    </div>

  </template>

</el-card>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/install.js" type="text/javascript"></script>
}